<template>
    <div>
        <el-row>
            <div v-for="item in courseList" :key="id" class="text item">
                <el-card class="box-card">
                    <el-row type="flex" justify="center">
                        <el-col :span="12">
                            <p class="coursename">{{item.reservation_content}}</p>
                        </el-col>
                        <el-col :span="6">
                            <el-button @click="goLive" type="success" plain>进入学习</el-button>
                        </el-col>
                        <el-col :span="6">
                            <el-button @click="cancel(item.reservation_id)" plain>取消预约</el-button>
                        </el-col>
                    </el-row>
                    <el-row class="teacher">
                        <el-col :span="3">
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                        </el-col>
                        <el-col :span="6">
                            <div @click="toTeacher(item.teacher_id)">
                                <span id="userid">{{item.teacher_name}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <p class="coursetime">{{item.time}}</p>
                </el-card>
            </div>
        </el-row>
        <el-row style="margin-top: 30px">
            <el-pagination
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import POST from "../../api/POST";
    import Cookies from "js-cookie"

    export default {
        name: "courselist",
        components: {},

        data() {
            return {
                info: [],
                courseList: [],
                cancelMsg: '',
            }
        },
        methods: {
            getCourseList() {
                this.info = Cookies.get('info');
                this.info = JSON.parse(this.info);
                console.log(this.info);
                let data = {
                    'account': this.info.account
                };
                POST.courseShowList(data).then(res => {
                    this.courseList = res.reservation_list;
                })
            },
            book() {
                this.$router.push({path: `/teacher/appointment`})
            },
            toTeacher(id) {
                this.$router.push({path: `/teacher/` + id + `/detail`});
            },
            goLive() {
                this.$router.push({path: `/personal/live`})
            },
            cancel(reservation_id) {
                this.$confirm('此操作将取消与老师的预约，你将无法得到退款。', '取消预约', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.cancelCourse(reservation_id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '放弃取消预约'
                    });
                });
            },
            cancelCourse(reservation_id) {
                let data = {
                    'reservation_id': reservation_id
                };
                POST.cancelReservation(data).then(res => {
                    this.cancelMsg = res.message;
                    if(this.cancelMsg === "删除成功"){
                        this.$message({
                            type: 'success',
                            message: "取消预约成功"
                        });
                    }else{
                        this.$message({
                            type: 'info',
                            message: "取消预约失败"
                        });
                    }
                })
            },
        },
        mounted() {
            this.getCourseList()
        }
    }
</script>

<style scoped>
    .box-card {
        margin-top: 20px;
        width: 600px;
        height: 200px;
    }

    .coursename {
        font-size: 20px;
        /*text-align: center;*/
    }

    .teacher {
        margin: 20px;
    }
</style>